<template>
  <drag-modal
    title="查看"
    :width="360"
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="false"
    @cancel="cancel"
  >
    <a-spin :spinning="loading">
      <div style="max-height: 500px; overflow-y: auto;">
        <a-tree
          :disabled="true"
          :tree-data="treeData"
          :show-icon="true"
          :show-line="false"
          :checkable="true"
          :selectable="false"
          :checkedKeys="checkedTreeNodeKeys"
        >
          <template slot="customTitle" slot-scope="item">
            <span><a-icon type="table" /> {{item.title}} </span>
          </template>
        </a-tree>
      </div>
    </a-spin>
    <template slot="footer">
      <a-button @click="cancel">关闭</a-button>
    </template>
  </drag-modal>
</template>

<script>
import {dataSourceService} from '@/services'

export default {
  name: 'QueryModal',
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      treeData: [],
      checkedTreeNodeKeys: []
    }
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    queryAction(val) {
      this.loading = true
      this.treeData = []
      this.checkedTreeNodeKeys = []
      const params = {
        id: val
      }
      dataSourceService.queryTableTree(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200 && result.data) {
          this.treeData = result.data
          this.checkedTreeNodeKeys = this.treeData.map(item => item.key)
        }
      }).finally(this.loading = false)
    }
  }
}
</script>
